<template>
  <div class="wrap-index">
    <Header></Header>
    <div class="flex-row-start-start content">
      <div class="left-side">
        <left-side
          :selQk="selQk"
          :showJz="showJz"
          :kqId="kqId"
          :kqName="kqName"
          :kqState="kqState"
          :kqNum="kqNum"
          :kqArea="kqArea"
          :jcdNum="jcdNum"
          :kqList="kqList"
          :jzNum="jzNum"
          :jzList="jzList"
          :jzId ="curJz"
          :jzName="jzName"
          :jzIndexList="jzIndexList"
          @trans-to-event="toShowEvent"
        ></left-side>
      </div>
      <div class="middle-side">
        <middle-side
          @syn-o-selQk="tranSelQk"
          :selQk="selQk"
          ref="middleSide"
          @change-to-jz="changeToJz"
          @change-to-kq ="changeTokq"
          :showEventType="showEventType"
          :showAllType="showAllType"
          @click-jcd="clickJcd"
          ></middle-side>
      </div>
      <div class="right-side">
        <right-side
          :selQk="selQk"
          :showJz="showJz"
          :kqxlNum="kqxlNum"
          :cqxlNum="cqxlNum"
          :hkxlNum="hkxlNum"
          :jkxlNum="jkxlNum"
          :kqxlList="kqxlList"
          :cqxlList="cqxlList"
          :hkxlList="hkxlList"
          :jkxlList="jkxlList"
          :jzIndexList="jzIndexList"
          :jzId ="curJz"
        ></right-side>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "./components/index/header";
import LeftSide from "./components/index/leftSide";
import middleSide from "./components/index/middleSide";
import rightSide from "./components/index/rightSide";
export default {
  data() {
    return {
      rightList: {},
      selQk: "",
      showJz: false,
      curJz: "",
      kqNum: 0,
      kqArea: 0,
      kqList: [],
      jzNum: 0,
      jcdNum: 0,
      kqxlNum: 0,
      cqxlNum: 0,
      hkxlNum: 0,
      jkxlNum:0,
      jkxlList:[],
      kqxlList: [],
      cqxlList: [],
      hkxlList: [],
      kqName: "",
      kqId:"",
      kqState: "",
      jzId:"",
      jzName:"",
      jzState:"",
      jzList: [],
      jzIndexList:{},
      showEventType:true,
      showAllType:false
    };
  },
  components: {
    Header,
    LeftSide,
    middleSide,
    rightSide,
  },
  mounted() {
    let it = this;
    if (this.$route.query.selKq != undefined) {
      this.selQk = this.$route.query.selKq;
      this.showJz = this.$route.query.showJz;
      if (this.selQk != "整体") {
        if(this.showJz){
          this.curJz = this.$route.query.curJz
          this.querySpecJzInfo()
          it.$refs.middleSide.changeSelTab(it.selQk,it.showJz,this.curJz);
        }else{
          this.querySpecKqInfo();
          it.$refs.middleSide.changeSelTab(it.selQk,it.showJz);
        }
      } else {
        this.getIndexList();
        it.$refs.middleSide.changeSelTab("整体",it.showJz);
      }
    } else {
      this.selQk ="整体"
      this.getIndexList();
      it.$refs.middleSide.changeSelTab("整体",it.showJz);
    }
   
  },
  watch: {
    selQk(val) {
      this.showAllType = false
      if (val != "整体") {
        if(!this.showJz){
          this.querySpecKqInfo();
        }else{
          this.querySpecJzInfo()
        }
        this.showEventType = true
      } else {
        this.getIndexList();
        this.showEventType = false
      }
    },
    showJz(val) {
      if (val) {
        this.querySpecJzInfo();
      }else{
        this.querySpecKqInfo()
      }
    },
    curJz(val){
      this.querySpecJzInfo();
    }
  },
  methods: {
    toShowEvent(val){
      
        // this.showEventType  = val
        this.showAllType = true
    },
    querySpecJzxlInfo(){
      let param = {}
      param.id = this.selQk
       this.$axios({
        url: "/getSpecJzInfo",
        type: "post",
        params: param,
      }).then((res) => {
        
      });
    },
    querySpecJzInfo() {
      let liantongParam = {};
      liantongParam.jzId = this.curJz;
      liantongParam.jcType = "连通性"
      this.$axios.post("/jcEvent/list", liantongParam).then((res) => {
        console.log("=====------liantong", res.data)
        this.kqxlNum = res.data.length;
        this.kqxlList = res.data;
      });

      let huankongParam = {};
      huankongParam.jzId = this.curJz;
      huankongParam.jcType = "环空示踪剂"
      this.$axios.post("/jcEvent/list", huankongParam).then((res) => {
        console.log("=====------huankong", res.data)
        this.jkxlNum = res.data.length;
        this.jkxlList = res.data;
      });

      let dibiaoParam = {};
      dibiaoParam.jzId = this.curJz;
      dibiaoParam.jcType = "地表示踪剂"
      this.$axios.post("/jcEvent/list", dibiaoParam).then((res) => {
        console.log("=====------地表", res.data)
        this.hkxlNum = res.data.length;
        this.hkxlList = res.data;
      });

      let jingkouParam = {};
      jingkouParam.jzId = this.curJz;
      jingkouParam.jcType = "井口示踪剂"
      this.$axios.post("/jcEvent/list", jingkouParam).then((res) => {
        this.cqxlNum = res.data.length;
        this.cqxlList = res.data;
      });

      let param = {};
      param.id = this.curJz;
      this.$axios({
        url: "/getSpecJzInfo",
        type: "post",
        params: param,
      }).then((res) => {
        let data = res.data;
        this.jzId = data.jzId;
        this.curJz = data.jzId;
        this.jzName = data.jzName
        this.jzIndexList.jzId = data.jzId;
        this.jzIndexList.jzPoint = data.jzPoint
        this.jzIndexList.jzState = data.jzState;
        this.jzIndexList.jcdNum = data.jcdNum;

      });
    },
    clickJcd(val) {
      let eventParam = {};
      eventParam.jcdId = val.id;
      this.$axios.post("/jcEvent/listEvents", eventParam).then((res) => {
        console.log("clickJcd, res", res);
        this.$set(this.jzIndexList, 'eventList', res.data);
      });
    },
    querySpecKqInfo() {
      let liantongParam = {};
      liantongParam.jcType = "连通性"
      liantongParam.kqId = this.selQk;
      let map = {};
      this.$axios.post("/jcEvent/list", liantongParam).then((res) => {
        this.kqxlNum = res.data.length;
        res.data.reduce((acc, cur) => {
          if (!acc[cur.jzName]) {
            acc[cur.jzName] = 1;
          } else {
            acc[cur.jzName] += 1;
          }
          return acc;
        }, map);
        this.kqxlList = Object.entries(map).map(([key, value]) => ({
          name: key,
          value: value
        }));
      });

      let huankongParam = {};
      huankongParam.jcType = "环空示踪剂"
      huankongParam.kqId = this.selQk;
      this.$axios.post("/jcEvent/list", huankongParam).then((res) => {
        this.jkxlNum = res.data.length;
        res.data.reduce((acc, cur) => {
          if (!acc[cur.jzName]) {
            acc[cur.jzName] = 1;
          } else {
            acc[cur.jzName] += 1;
          }
          return acc;
        }, map);
        this.jkxlList = Object.entries(map).map(([key, value]) => ({
          name: key,
          value: value
        }));
      });

      let dibiaoParam = {};
      dibiaoParam.jcType = "地表示踪剂"
      dibiaoParam.kqId = this.selQk;
      this.$axios.post("/jcEvent/list", dibiaoParam).then((res) => {
        this.hkxlNum = res.data.length;
        res.data.reduce((acc, cur) => {
          if (!acc[cur.jzName]) {
            acc[cur.jzName] = 1;
          } else {
            acc[cur.jzName] += 1;
          }
          return acc;
        }, map);
        this.hkxlList = Object.entries(map).map(([key, value]) => ({
          name: key,
          value: value
        }));
      });

      let jingkouParam = {};
      jingkouParam.jcType = "井口示踪剂"
      jingkouParam.kqId = this.selQk;
      this.$axios.post("/jcEvent/list", jingkouParam).then((res) => {
        this.cqxlNum = res.data.length;
        res.data.reduce((acc, cur) => {
          if (!acc[cur.jzName]) {
            acc[cur.jzName] = 1;
          } else {
            acc[cur.jzName] += 1;
          }
          return acc;
        }, map);
        this.cqxlList = Object.entries(map).map(([key, value]) => ({
          name: key,
          value: value
        }));
      });

      this.$axios.post("/jcd/list", {kqId: this.selQk}).then((res) => {
        this.jzList = res.data;
      });

      let param = {};
      param.id = this.selQk;
      this.$axios({
        url: "/getSpecKqInfo",
        type: "post",
        params: param,
      }).then((res) => {
        let data = res.data.data;
        this.kqName = data.name;
        this.kqId = data.id;
        this.kqState = data.kqState;
        this.kqArea = data.area;
        this.jzNum = data.jzNum;
        this.jcdNum = data.jcdNum;
      });
    },
    tranSelQk(val) {
      this.selQk = val;
      if(!this.showJz){
         this.showJz = false
      } 
    },
    changeToJz(val) {
      this.curJz = val.name
      this.showEventType = val.showEventType
      this.showJz = true;
    },
    changeTokq(val){
      this.showJz  =false
    },
    getIndexList() {

      let liantongParam = {};
      liantongParam.jcType = "连通性"
      let map = {};
      this.$axios.post("/jcEvent/list", liantongParam).then((res) => {
        this.kqxlNum = res.data.length;
        res.data.reduce((acc, cur) => {
          if (!acc[cur.kqName]) {
            acc[cur.c] = 1;
          } else {
            acc[cur.kqName] += 1;
          }
          return acc;
        }, map);
        this.kqxlList = Object.entries(map).map(([key, value]) => ({
          name: key,
          value: value
        }));
      });

      let huankongParam = {};
      huankongParam.jcType = "环空示踪剂"
      this.$axios.post("/jcEvent/list", huankongParam).then((res) => {
        this.jkxlNum = res.data.length;
        res.data.reduce((acc, cur) => {
          if (!acc[cur.kqName]) {
            acc[cur.kqName] = 1;
          } else {
            acc[cur.kqName] += 1;
          }
          return acc;
        }, map);
        this.jkxlList = Object.entries(map).map(([key, value]) => ({
          name: key,
          value: value
        }));
      });

      let dibiaoParam = {};
      dibiaoParam.jcType = "地表示踪剂"
      this.$axios.post("/jcEvent/list", dibiaoParam).then((res) => {
        this.hkxlNum = res.data.length;
        res.data.reduce((acc, cur) => {
          if (!acc[cur.kqName]) {
            acc[cur.kqName] = 1;
          } else {
            acc[cur.kqName] += 1;
          }
          return acc;
        }, map);
        this.hkxlList = Object.entries(map).map(([key, value]) => ({
          name: key,
          value: value
        }));
      });

      let jingkouParam = {};
      jingkouParam.jcType = "井口示踪剂"
      this.$axios.post("/jcEvent/list", jingkouParam).then((res) => {
        this.cqxlNum = res.data.length;
        res.data.reduce((acc, cur) => {
          if (!acc[cur.kqName]) {
            acc[cur.kqName] = 1;
          } else {
            acc[cur.kqName] += 1;
          }
          return acc;
        }, map);
        this.cqxlList = Object.entries(map).map(([key, value]) => ({
          name: key,
          value: value
        }));
      });


      this.$axios({
        url: "/getIndexList",
        type: "get",
      }).then((res) => {
        let data = res.data;
        this.kqNum = data.kqNum;
        this.kqArea = data.kqArea;
        this.jzNum = data.jzNum;
        this.jcdNum = data.jcdNum;
        this.kqList = data.kqList;
      });
    },
  },
};
</script>
<style  scoped>
.wrap {
  width: 100%;
  height: 100%;
  /* position: fixed */
}
.content {
  margin-top: 32px;
  margin-left: 1.2%;
  margin-right: 1.2%;
}
.left-side {
  width: 24.44%;
  margin-right: 1.35%;
}
.middle-side {
  width: 48.05%;
  margin-right: 1.3%;
}
.right-side {
  width: 23.8%;
}
</style>